<template>
  <div class="hotsale">
    <!-- 1 -->

    <div class="hotsale-a">
      <img src="@\assets\images\Hotsale\1.jpg" alt="" class="hotsale-img" />
      <div class="hotsale-size">
        <p class="hotsale-b">网易严选热销百强榜</p>
        <p class="hotsale-c">
          本排名按严选官方实时数据计算得出，榜单所覆盖均为在售商品。每1小时更新一次
        </p>
      </div>
    </div>

    <!-- 2-->
    <div class="hotsale-list">
      <div class="hotsale-list-a">
        <ul class="hotsale-list-b" @click="updateGoodList">
          <li class="hotsale-list-c" :class="{ active: !route.query.categoryId}"><a>全部</a></li>
          <li
            v-for="cate in cateList"
            :data-id="cate.id"
            :class="{ active: route.query.categoryId as unknown == cate.id }"
          >
            <a>{{ cate.name }}</a>
          </li>
        </ul>
      </div>
    </div>

    <!-- 3 -->
    <div class="good-list">
    <ul id="ul" class="m-topItemList"  v-to-detail="router">
      <li
        class="goods-item"
        v-for="good,index in goodList"
        :key="good.id"
      >
        <div class="pic">
          <img class="pic-img" :src="good.listPicUrl" alt=""  :data-id="good.id"/>
          <div class="icon-top">
            <img  :src="index<3 ?'/top3.png':'/top.png'" alt="">
            <span>{{index+1}}</span>
          </div>
        </div>
        <div class="content-a">
          <div class="contentTitle">
            <div class="title"><a  :data-id="good.id">{{ good.name }}</a></div>
            <div class="price-wrap">
              <span class="price">￥{{ good.retailPrice }}</span>
              <span class="line-price">￥{{ good.counterPrice }}</span>
              <i class="iconfont icon-gouwuche font-a"></i>
            </div>
          </div>

          <div class="comment">
            <img
              :src="
                good.hotSaleListBottomInfo && good.hotSaleListBottomInfo.iconUrl
              "
              alt="头像"
            />
            <span>
              {{
                good.hotSaleListBottomInfo && good.hotSaleListBottomInfo.content
              }}</span
            >
          </div>
        </div>
      </li>
    </ul>
  </div>
    <!-- 空白-->
    <div class="kongbai"></div>

    <!-- 4 -->
    <div class="kongbai">
      <div class="hengxian">
        <div class="more-rank">
          <i class="iconfont icon-chengshiguanli font-big"></i>
          <span>更多分类热销榜单</span>
        </div>
      </div>
    </div>

    <!-- 5 -->
    <div class="life">
      <ul class="life-a">
        <div>
          <li class="life-b colora">
            <p class="line-size">居家生活榜</p>
            <div class="xiahengxian" style="margin-top: 15px"></div>
            <img src="@\assets\images\Hotsale\3.jpg" alt="" class="life-img" />
          </li>
        </div>
        <div>
          <li class="life-b colorb">
            <p class="line-size">服饰鞋包榜</p>
            <div class="xiahengxian" style="margin-top: 15px"></div>
            <img src="@\assets\images\Hotsale\4.jpg" alt="" class="life-img" />
          </li>
        </div>
        <div>
          <li class="life-b colorc">
            <p class="line-size">美食酒水榜</p>
            <div class="xiahengxian" style="margin-top: 15px"></div>
            <img src="@\assets\images\Hotsale\5.jpg" alt="" class="life-img" />
          </li>
        </div>
        <div>
          <li class="life-b colord">
            <p class="line-size">个护清洁榜</p>
            <div class="xiahengxian" style="margin-top: 15px"></div>
            <img src="@\assets\images\Hotsale\6.jpg" alt="" class="life-img" />
          </li>
        </div>
        <div>
          <li class="life-b colore">
            <p class="line-size">母婴亲子榜</p>
            <div class="xiahengxian" style="margin-top: 15px"></div>
            <img src="@\assets\images\Hotsale\7.jpg" alt="" class="life-img" />
          </li>
        </div>
        <div>
          <li class="life-b colorf">
            <p class="line-size">运动旅游榜</p>
            <div class="xiahengxian" style="margin-top: 15px"></div>
            <img src="@\assets\images\Hotsale\8.jpg" alt="" class="life-img" />
          </li>
        </div>
        <div>
          <li class="life-b colorg">
            <p class="line-size">数码家电榜</p>
            <div class="xiahengxian" style="margin-top: 15px"></div>
            <img src="@\assets\images\Hotsale\9.jpg" alt="" class="life-img" />
          </li>
        </div>
        <div>
          <li class="life-b colorh">
            <p class="line-size">严选全球榜</p>
            <div class="xiahengxian" style="margin-top: 15px"></div>
            <img src="@\assets\images\Hotsale\10.jpg" alt="" class="life-img" />
          </li>
        </div>
        <div>
          <li class="life-b colori">
            <p class="line-size">宠物生活榜</p>
            <div class="xiahengxian" style="margin-top: 15px"></div>
            <img src="@\assets\images\Hotsale\11.jpg" alt="" class="life-img" />
          </li>
        </div>
      </ul>
    </div>
  </div>
</template>

<script lang="ts">
  export default {
    name: "WSaleRank",
  };
</script>
<script setup lang="ts">
  import { Hotsale } from "@/api/hotsale/interface";
  import { onMounted, ref, watch } from "vue";
  import { useRoute, useRouter } from "vue-router";
  import { reqHotsaleList } from "../../api/hotsale/index";
  import { useHeaderStore } from "@/stores/modules/header";
  import { storeToRefs } from "pinia";
  const headerStore = useHeaderStore();
  const { cateList } = storeToRefs(headerStore);
  const router = useRouter();
  const route = useRoute();
  let goodList = ref<Hotsale[]>([]);
  onMounted(async () => {
    goodList.value = await reqHotsaleList(route.query.categoryId);
  });
  //更新商品列表
  const updateGoodList = (e) => {
    const goodItem = e.path.find((ele) => ele.nodeName === "LI");
    if (goodItem.className === "hotsale-list-c") {
      return router.push("/saleRank");
    }
    goodItem &&
      router.push({
        name: "WSaleRank",
        query: {
          categoryId: goodItem.dataset.id,
        },
      });
  };

  watch(
    () => route.query.categoryId,
    async (categoryId) => {
      goodList.value = await reqHotsaleList(categoryId);
    }
  );
</script>

<style lang="less" scoped>
  .hotsale {
    min-width: 1090px;
    padding-top: 10px;
    background-color: #F5F5F5;

  }
  .hotsale-a {
    /* text-align: center; */
    position: relative;
    text-align: center;
    vertical-align: middle;
  }
  .hotsale-img {
    position: relative;
    width: 1090px;
    height: 270px;
  }

  .hotsale-size {
    position: absolute;
    left: 50%;
    top: 54%;
    transform: translate(-50%, -50%);
  }
  .hotsale-b {
    font-size: 32px;
    line-height: 36px;
    font-weight: 900;
    color: #333;
  }
  .hotsale-c {
    width: 340px;
    margin: 10px auto 0;
    line-height: 18px;
    color: #999;
    margin-top: 5px;
  }
  /* 2 */
  .hotsale-list {
    width: 1090px;
    margin: 0 auto;
    background-color: #fff;

  }
  .hotsale-list-b {
    display: flex;
    justify-content: space-evenly;
    font-size: 15px;
    border-bottom: 20px solid #f5f5f5;
    height: 40px;
    line-height: 30px;
    li {
      padding: 5px 0;
      cursor: pointer;
      &:hover {
        border-bottom: 2px solid #c39657;
      }
    }
  }
  .hotsale-list-c {
    /* border-bottom: 2px solid #b4a078;
padding-bottom: 2px;
color: #b4a078;
*/
    color: #333;
  }

  .m-topItemList {
    margin: 0 auto;
    flex-wrap: wrap;
    justify-content: space-between;
    box-sizing: border-box;
    display: flex;

    .goods-item {
      margin-bottom: 10px;
      .pic {
        position:relative;
        width: 245px;
        height: 245px;
        overflow: hidden;
        cursor: pointer;
        .pic-img {
          display: flex;
          width: 100%;
          height: 100%;
          transition: all 0.5s;
          &:hover {
            transform: scale(1.1);
          }
        }
      }
      .content-a {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        height: 160px;
        -webkit-text-size-adjust: 100%;
        font: 12px/1.5 "Microsoft Yahei", "微软雅黑", verdana;
        font-size: 12px;
        font-family: "Microsoft Yahei", "微软雅黑", verdana;
        color: #333;
        list-style: none;
        box-sizing: border-box;
        min-height: 1px;
        .title {
          margin-top: 25px;
          width: 216px;
          text-align: center;
          margin-left: 15px;
          font-weight: bold;
          font-size: 16px;
          cursor: pointer;
          a:hover {
            color: #c39657;
          }
        }
        .price-wrap {
          .price {
            font-size: 13px;
            margin-left: 70px;
            color: #d4282d;
          }
          .line-price {
            font-size: 13px;
            color: #999;
            text-decoration: line-through;
          }
          .font-a {
            font-size: 18px;
            margin-left: 2px;
            font-weight: bold;
            color: #c39657;
          }
        }
        .comment {
          width: 245px;
          height: 56px;
          line-height: 56px;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
          img {
            width: 40px;
            height: 40px;
            vertical-align: middle;
            border-radius: 50%;
            margin-right: 20px;
          }
          span {
            width: 205px;
            vertical-align: middle;
          }
          .font-b {
            font-size: 40px;
          }
        }
      }
    }
    #ul {
      display: flex;
      list-style-type: disc;
      margin-block-start: 1em;
      margin-block-end: 1em;
      margin-inline-start: 0px;
      margin-inline-end: 0px;
      padding-inline-start: 40px;
      margin-right: -10px;
    }
  }
  .kongbai {
    width: 1090px;
    height: 100px;
    margin: 0 auto;
    position: relative;
  }
  .hengxian {
    border-bottom: 1px solid #979797;
    // text-align: center;
    // display: flex;
    .more-rank {
      position: absolute;
      top: -17px;
      left: 50%;
      transform: translatex(-50%);
      padding: 0 50px;
      font-size: 30px;
    }
  }
  .font-big {
    font-size: 30px;
  }

  .life {
    width: 1090px;
    margin: 0 auto;
  }
  .life-a {
    width: 1090px;
    margin: 0 auto;
    flex-wrap: wrap;
    justify-content: space-between;
    box-sizing: border-box;
    display: flex;
  }
  .life-b {
    width: 242px;
    height: 340px;
    box-sizing: border-box;
    padding-top: 100px;
    margin-bottom: 10px;
  }
  .life-img {
    width: 230px;
    height: 230px;
    text-align: center;
    margin-left: 5px;
    margin-top: 34px;
  }
  .line-size {
    text-align: center;
    margin-top: -75px;
    font-size: 20px;
  }
  .xiahengxian {
    border: 2px solid #afa6a7;
    width: 20px;

    margin: 0 auto;
  }
  .colora {
    background-color: #fef7ec;
  }
  .colorb {
    background-color: #eff6f3;
  }
  .colorc {
    background-color: #faf4f0;
  }
  .colord {
    background-color: #f8fcff;
  }
  .colore {
    background-color: #fff0e7;
  }
  .colorf {
    background-color: #fbf7ff;
  }
  .colorg {
    background-color: #f1f7fa;
  }
  .colorh {
    background-color: #fff2f2;
  }
  .colori {
    background-color: #fdfbf8;
  }
  .active {
    border-bottom: 2px solid #c39657;
  }
  .icon-top{
    position:absolute;
    font-style: normal;
    text-align: center;
    line-height: 35px;
    color: #fff;
    top:-3px;
    width: 40px;
    height: 35px;
    left: 10px;
    img{
      position: absolute;
      width: 100%;
      height: 100%;
      top: 0;
      left: 1.5px
    }
    span{
      position: absolute;
      left: 50%;
      transform:translateX(-50%);
    }
  }
  .good-list{
    width: 1090px;
    padding: 40px;
    background-color: #fff;
    margin: 0 auto;
    box-sizing: border-box;
  }
</style>
